<template>
  <div>
    <div class="head">
      <el-input
        v-model="position.name"
        placeholder="添加职位..."
        suffix-icon="el-icon-plus"
        style="margin-right:10px"
        @keydown.enter.native="addPosition"
      ></el-input>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addPosition"
      >添加</el-button>
    </div>
    <div class="main">
      <el-table
        :data="positions"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column
          label="编号"
          type="index"
          width="50"
        ></el-table-column>
        <el-table-column
          label="职位"
          prop="name"
          width="90"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          prop="createDate"
          width="130"
        ></el-table-column>
        <el-table-column
          label="操作"
          width="180"
        >
          <template v-slot="scope">
            <el-button @click="showDialog(scope.row)">编辑</el-button>
            <el-button
              type="danger"
              @click="deletePosition(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="foot">
      <el-button
        type="danger"
        @click="deletePositions"
        :disabled="this.multipleSelection.length == 0"
      >批量删除</el-button>
    </div>

    <div class="dialogs">
      <el-dialog
        title="编辑"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form
          :model="positionUpdate"
          label-width="50px"
          class="el-form"
        >
          <el-form-item label="职位">
            <el-input
              v-model="positionUpdate.name"
              placeholder="请填写职位名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              v-model="positionUpdate.enabled"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="submitUpdate"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>


<script>
import _ from 'lodash'
export default {

  name: 'PosMana',

  data() {
    return {
      position: {},
      positionUpdate: {},
      positions: [],
      multipleSelection: [],
      dialogVisible: false
    }

  },

  methods: {
    initPositions() {
      this.getRequest('system/basic/pos/').then(resp => {
        if (resp) {
          this.positions = resp
        }
      })
    },

    addPosition() {
      this.postRequest('system/basic/pos/', this.position).then(resp => {
        if (resp) {
          this.position = {}
          this.initPositions()
        }
      })
    },

    deletePosition(row) {
      this.$confirm(`该操作将永久删除${row.name},是否确认？`, '提示', { type: 'warning' }).then(() => {

        this.deleteRequest(`system/basic/pos/${row.id}`).then(resp => {
          if (resp) {
            this.initPositions()
          }
        })

      }).catch(() => {
        this.$message.info('已取消')
      })

    },

    deletePositions() {

      let ids = '?'
      let positionNames = []
      this.multipleSelection.forEach(position => {
        ids += `ids=${position.id}&`
        positionNames.push(position.name)
      })

      this.$confirm(`该操作将永久删除(${positionNames}),是否确认？`, '提示', { type: 'warning' }).then(() => {
        this.deleteRequest(`system/basic/pos/${ids}`).then(resp => {
          if (resp) {
            this.initPositions()
          }
        })
      }).catch(() => {
        this.$message.info('已取消')
      })

    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    showDialog(row) {
      this.positionUpdate = _.cloneDeep(row)
      this.dialogVisible = true
    },
    submitUpdate() {
      this.putRequest(`system/basic/pos/`, this.positionUpdate).then(resp => {
        if (resp) {
          this.initPositions()
          this.dialogVisible = false
        }
      })
    }
  },
  mounted() {
    this.initPositions()
  }
}
</script>


<style  scoped>
.head {
  display: flex;
  justify-content: space-between;
  width: 30%;
  margin-bottom: 10px;
}
.main {
  width: 50%;
  margin-bottom: 10px;
}
.el-form {
  width: 60%;
  margin: auto;
}
</style>